<template>
  <div>
    <div style="margin: 20px 0 20px 0;">
      <el-row type="flex" class="row-bg content-y" justify="space-around">
        <el-col :span='6'>
          <el-card style="background-color:rgb(209,196,196);" class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>门诊上月医保病人数</span>
            </div>
            <div class="text item">
              {{outpatient}}
            </div>
          </el-card>
        </el-col>
        <el-col :span='6'>
          <el-card style="background-color:rgb(209,185,185);" class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>住院上月医保病人数</span>
            </div>
            <div class="text item">
              {{inpatient}}
            </div>
          </el-card>
        </el-col>
        <el-col :span='6'>
          <el-card style="background-color:rgb(198,165,165);" class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>急诊上月医保病人数</span>
            </div>
            <div class="text item">
              {{emepatient}}
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row type="flex" class="row-bg" justify="center" style="height:300px;">
        <el-col :span='9'>
          <div id="echarts" style="width:100%;height:100%;"></div>
        </el-col>
        <el-col :span='9'>
          <div id="pieChart" style="width:100%;height:100%;"></div>
        </el-col>
      </el-row>
      <el-row type="flex" class="row-bg content-y" justify="center">
        <el-col :span='9'>近6月医保病人占比</el-col>
        <el-col :span='9'>近6月医保病人占比</el-col>
      </el-row>
    </div>
    <div style="margin-top:30px;">
      <el-row type="flex" class="row-bg" justify="center" style="height:300px;">
        <el-col :span='18'>
          <div id="lineChart" style="width:100%;height:100%;"></div>
        </el-col>
      </el-row>
      <el-row type="flex" class="row-bg content-y" justify="center">
        <el-col :span='6'>近6月医保病人占比</el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { dashboard } from '../../api/pt-visit'

export default {
  methods: {
    loadEcharts () {
      const that = this
      dashboard(5).then(res => {
        that.outpatient = res.dashboard1[0]
        that.inpatient = res.dashboard1[1]
        that.emepatient = res.dashboard1[2]
        const echarts = this.$echarts.init(document.getElementById('echarts'))
        // 指定图表的配置项和数据
        var option = {
          tooltip: {},
          xAxis: {
            data: ['01月', '02月', '03月', '04月', '05月', '06月']
          },
          yAxis: {},
          series: [{
            name: '占比',
            type: 'bar',
            data: [0, 0, 0, 0, 0, 0]
          }]
        }
        option.xAxis.data = res.dashboard2.xAxis
        // option.series[0].data = res.dashboard2.data
        echarts.setOption(option)
        // 饼图
        const pieChart = this.$echarts.init(document.getElementById('pieChart'))
        var data = {
          series: [
            {
              name: '访问来源',
              // 设置图表类型为饼图
              type: 'pie',
              // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
              radius: '55%',
              // 数据数组，name 为数据项名称，value 为数据项值
              data: [
                { value: 0, name: '01月' },
                { value: 0, name: '02月' },
                { value: 0, name: '03月' },
                { value: 0, name: '04月' },
                { value: 0, name: '05月' },
                { value: 0, name: '06月' }
              ]
            }
          ]
        }
        data.series[0].data = res.dashboard3
        pieChart.setOption(data)
        // 折线图
        const lineChart = this.$echarts.init(document.getElementById('lineChart'))
        var chartData = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['门诊', '住院', '急诊']
          },
          toolbox: {
            show: true,
            feature: {
              magicType: { show: true, type: ['stack', 'tiled'] },
              saveAsImage: { show: true }
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['01月', '02月', '03月', '04月', '05月', '06月']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: '门诊',
            type: 'line',
            smooth: true,
            data: [0, 0, 0, 0, 0, 0]
          },
          {
            name: '住院',
            type: 'line',
            smooth: true,
            data: [0, 0, 0, 0, 0, 0]
          },
          {
            name: '急诊',
            type: 'line',
            smooth: true,
            data: [0, 0, 0, 0, 0, 0]
          }]
        }
        chartData.xAxis.data = res.dashboard4.category
        chartData.series[0].data = res.dashboard4.data[0]
        chartData.series[1].data = res.dashboard4.data[1]
        chartData.series[2].data = res.dashboard4.data[2]
        lineChart.setOption(chartData)
      })
    }
  },
  mounted () {
    this.loadEcharts()
  },
  data () {
    return {
      outpatient: 0,
      inpatient: 0,
      emepatient: 0
    }
  }
}
</script>

<style lang="scss">
  .content-y {
    text-align: center;
  }
</style>
